<template>
  <div class="detail">
    <tab-control ref="tabControlRef" @tab-item-click="tabClick" class="tabs" :titles="names" v-if="isTabControl" />
    <van-nav-bar title="房屋详情" left-text="旅途" left-arrow @click-left="onClickLeft" />
    <!-- 
      v-memo为了实现缓存，
      如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过，
      这里是为了解决每次滚动都会执行getSectionRef的问题
     -->
    <div class="main" v-if="mainPart" v-memo="[mainPart]">
      <detail-swiper :swiper-data="mainPart.topModule.housePicture.housePics" />
      <!--  -->
      <detail-infos name="描述" :top-infos="mainPart.topModule" :ref="getSectionRef" />
      <!-- 房屋信息 -->
      <detail-facility name="设施" :house-facility=mainPart.dynamicModule.facilityModule.houseFacility
        :ref="getSectionRef" />
      <!-- 房东信息 -->
      <detail-landlord name="房东" :landlord-data="mainPart.dynamicModule.landlordModule" :ref="getSectionRef" />
      <!-- 热门评论 -->
      <detail-comment name="评论" :comment="mainPart.dynamicModule.commentModule" :ref="getSectionRef" />
      <!-- 预定须知 -->
      <detail-notice name="须知" :order-rules="mainPart.dynamicModule.rulesModule.orderRules" :ref="getSectionRef" />
      <!-- 地图 -->
      <detail-map name="周边" :position="mainPart.dynamicModule.positionModule" :ref="getSectionRef" />
      <!-- 价格说明 -->
      <detail-intro :price-intro="mainPart.introductionModule" />
    </div>
    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="">
      <div class="text">弘源旅途, 永无止境!</div>
    </div>

  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { getDetail } from "@/services/modules/detail"
import { computed, ref, watch } from 'vue';

import detailSwiper from './components/detail_01-swiper.vue'
import detailInfos from './components/detail_02-infos.vue'
import detailFacility from "./components/detail_03-facility.vue"
import detailLandlord from "./components/detail_04-landlord.vue"
import detailComment from "./components/detail_05-comment.vue"
import detailNotice from './components/detail_06-notice.vue'
import detailMap from './components/detail_07-map.vue'
import detailIntro from "./components/detail_08-intro.vue"
import tabControl from "@/components/tab-control/TabControl.vue"
import useScroll from '@/hooks/useScroll';
const router = useRouter()
const route = useRoute()
const houseId = route.query.houseId
// 发送网络请求
const detailInfo = ref({})
getDetail(houseId).then(({ data }) => {
  detailInfo.value = data
})
const mainPart = computed(() => detailInfo.value.mainPart)

/** 
//  BUG
 * 这样写有bug的原因就在于computed并不知道mainPart内部是否发生了变化,pinia存在缓存
  const detailStore = useDetailStore()
  detailStore.getDetailData(houseId)
  const { detailData } = storeToRefs(detailStore)
  const mainPart = computed(() => detailData.value.mainPart)
 * */




// 返回按钮
const onClickLeft = () => {
  router.back()
}

// tabControl的操作
const { scrollTop } = useScroll()
const isTabControl = computed(() => {
  return scrollTop.value >= 300
})


// tag点击tabcontrol的交互逻辑
const sectionEls = ref({}) //存放上面组件的根元素
const names = computed(() => {
  return Object.keys(sectionEls.value)
})
const getSectionRef = (value) => {
  // 这个函数卸载也会执行 value为null
  if (!value) return
  const name = value.$el.getAttribute('name')// $el拿到的是组件的根元素
  sectionEls.value[name] = value.$el
}
let isClick = false
let currentDistance = -1
const tabClick = (index) => {
  const key = Object.keys(sectionEls.value)[index]
  const el = sectionEls.value[key]
  let instance = el.offsetTop
  if (index !== 0) {
    instance = instance - 44
  }
  isClick = true
  currentDistance = instance

  // notes 这里是窗口滚动 而不是元素滚动 如果是元素滚动 detailRef.value.scrollTo()
  window.scrollTo({
    top: instance,
    behavior: "smooth" //平滑
  })
}

// tag 页面滚动时匹配对应的tabControl的index

const tabControlRef = ref(null)
let elArr = computed(() => Object.values(sectionEls.value))
let values = computed(() => elArr.value.map(el => el.offsetTop))
watch(scrollTop, (newVal) => {
  if (newVal === currentDistance) {
    isClick = false
  }
  // isClick = true的时候为点击的 就不让他匹配索引了
  if (isClick) return
  // 1.获取所有的区域的offsetTops
  // const els = Object.values(sectionEls.value)
  // const values = els.map(el => el.offsetTop)
  // 2. 根据newValue去匹配想要的索引
  /**
   * 例如： [100,400,700,1000]  value:300  匹配到的索引应该是0 匹配到的区间100-400
   */

  let index = values.value.length - 1
  for (let i = 0; i < values.value.length; i++) {
    if (values.value[i] > newVal + 44) {
      index = i - 1
      break
    }
  }
  tabControlRef.value?.setCurrentIndex(index)
})
</script>



<style lang="less" scoped>
.detail {
  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }

  .footer {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 123px;
    }

    .text {
      font-size: 12px;
      color: #666;
    }
  }


}
</style>